import {Button, Descriptions, Drawer, Space, Image, List} from 'antd';
import {connect} from 'umi';
import styles from '../styles.less'

const contentWidth = 280;
const labelWidth = 140;

const Detail = (props) => {
  const {detail, setDetail} = props.data;
  console.log(detail)
  /* 取消操作 */
  function onCancel() {
    setDetail(undefined);
  }
  // 判断详情为空
  if (!detail) {
    return null;
  }
  return (
    <Drawer
      title={detail ? detail.title : ''}
      width={1000}
      onClose={onCancel}
      open={detail ? detail.visible : false}
      bodyStyle={{paddingBottom: 80}}
      extra={
        <Space>
          <Button onClick={onCancel}>取消</Button>
        </Space>
      }
    >
      <div style={{marginTop: 12}}>
        <Descriptions column={2} bordered={true} size={'small'} labelStyle={{textAlign: 'right'}}>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="商家名称">
            {detail.data.mchName ? detail.data.mchName : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="订单编号">
            {detail.data.orderNo ? detail.data.orderNo : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="原始金额">
            {detail.data.amount ? (detail.data.amount/100).toFixed(2) : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="优惠金额">
            {detail.data.couponAmount ? (detail.data.couponAmount/100).toFixed(2) : '0'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="余额抵扣">
            {detail.data.balanceAmount ? (detail.data.balanceAmount/100).toFixed(2) : '0'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="支付金额">
            {detail.data.actualAmount ? (detail.data.actualAmount/100).toFixed(2) : '0'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="支付主体">
            {detail.data.body ? detail.data.body : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="支付渠道">
            {detail.data.payChannelName ? detail.data.payChannelName : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="订单状态">
            {detail.data.status ? '已支付' : '未支付'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="订单来源">
            {detail.data.source ? detail.data.source  : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="付款时间">
            {detail.data.timePaid ? detail.data.timePaid  : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="创建时间">
            {detail.data.createTime ? detail.data.createTime  : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="登录账号">
            {detail.data.userAuth2.account ? detail.data.userAuth2.account   : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="用户名称">
            {detail.data.userAuth2.nickname ? detail.data.userAuth2.nickname   : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="用户头像">
            <Image
              width={25} height={25} src={detail.data.userAuth2.avatar}
              fallback=""
            />
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="unionid">
            {detail.data.userAuth2.unionid ? detail.data.userAuth2.unionid   : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="openid">
            {detail.data.userAuth2.openid ? detail.data.userAuth2.openid   : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="appid">
            {detail.data.userAuth2.appId ? detail.data.userAuth2.appId   : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="客户端IP">
            {detail.data.clientIp ? detail.data.clientIp  : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="备注">
            {detail.data.remark ? detail.data.remark  : '暂无'}
          </Descriptions.Item>
        </Descriptions>


    </div>


    </Drawer>
  );
};


export default connect(({}) => {
  return {};
})(Detail);

